<template>
  <div
    v-if="isExternal"
    :style="styleIsExternalIcon"
    class="svg-icon svg-external-icon"
    :class="props.className"
  ></div>
   <!-- 内部图标 -->
   <svg
    v-else
    class="svg-icon"
    :class="props.className"
    :style="svgStyle"
    aria-hidden="true"
  >
       
    <use :xlink:href="iconName"></use>
     
  </svg>
</template>

<script lang="ts" setup>
import { ref, computed } from "vue";

interface IProps {
  icon: string;
  className?: string;
  width?: string;
  height?: string;
  color?: string;
}

const props = withDefaults(defineProps<IProps>(), {
  className: "",
  width: "22px",
  height: "22px",
  color: undefined,
});

const iconName = computed(() => `#icon-${props.icon}`);

const isExternal = computed(() => external(props.icon));

// function getSvgStyle() {
//   return {
//     width: props.width,
//     height: props.height,
//   };
// }
const svgStyle = computed(() => {
  const styleObj: Record<string, string> = {};
  if (props.color) {
    styleObj["color"] = props.color;
  }
  return {
    width: props.width,
    height: props.height,
    ...styleObj,
  };
});

// 外部图标的样式
const styleIsExternalIcon = computed(() => ({
  mask: `url(${props.icon}) no-repeat 50% 50%`,
  "-webkit-mask": `url(${props.icon}) no-repeat 50% 50%`,
}));

function external(path: string) {
  return /^(https?:|http)/.test(path);
}
// // 判断是否是外部图标
// function isExternal(path) {
//   // 判断是否是这几个开头，如果是的话那么就是外部图标
//   return /^(https?:|http)/.test(path);
// }
</script>

<style scoped lang="less">
.svg-icon {
  // width: 22px;
  // height: 22px;
  fill: currentColor; /*此属性为更改svg颜色属性设置*/
  stroke: currentColor;
  overflow: hidden;
  vertical-align: text-top;
  color: transparent;
}
</style>
